<!--
 * @Author: 詹真琦(legendryztachi@gmail.com)
 * @Date: 2022-05-17 11:24:59
 * @LastEditors: 代琪 1529992814@qq.com
 * @LastEditTime: 2022-08-11 15:38:23
 * @FilePath: \code\ctp-static-portal-front\src\components\footerArea\index.vue
 * @Description: 
-->
<template>
  <div class="footer" :style="styleOptions">
    <div v-html="sectionData.footer ? sectionData.footer.paramValue : ''"></div>
  </div>
</template>
<script>
  export default {
    name: 'FooterArea',
    props: {
      sectionData: {
        type: Object,
      },
    },
    data() {
      return {
        //都要从后台接收的
        // showFooter:true,
        // bg: '#dbe3ed',
        // height:'70px'
      };
    },
    computed: {
      styleOptions() {
        return {
          // height: this.sectionData.options && this.sectionData.options.height ? this.sectionData.options.height + 'px' : '50px',
          // backgroundColor: this.sectionData.options.backgroundColor || '#dbe3ed'
          backgroundColor: this.sectionData.webStyleFooterBgc || '#dbe3ed',
          display: this.sectionData.showFooter == '0' ? 'none' : 'block',
        };
      },
    },
    created() {
      console.log(this, 'footer this');
      console.log(this.sectionData, 'this.sectionData');
    },
  };
</script>

<style scoped>
  ::v-deep table {
    border-collapse: collapse;
    border-spacing: 0;
  }

  /* p标签也被初始化了 */
  ::v-deep p {
    padding: 0;
    margin: 0;
  }

  .footer {
    padding: 10px 0;
    overflow: hidden;
    font-size: 12px;
  }

  /* 全局的table都有这个样式,考虑写到全局样式表里去 */
</style>
